<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">

    <link href="//www.bootcss.com/p/layoutit/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<html>
<body>
<div class="container-fluid">
    <div class="row-fluid">
        <div class="span12">
            <h3 class="text-center">
                CosMos地址生成
            </h3>
        </div>
    </div>
    <div class="row-fluid">
        <div class="span2">
            <form class="form-search">
                <p>
                    输入目标地址
                </p>
                <p>
                    <input class="input-medium search-query" type="text"/>
                </p>
                <p>
                    <button class="btn" type="submit">查找</button>
                </p>
            </form>
            <ul class="nav nav-list">
                <li class="nav-header">
                    列表标题
                </li>
                <li>
                    <a href="/html">主网络</a>
                </li>
                <li>
                    <a href="/html/datalink.html">数据链Demo</a>
                </li>
                <li class="active">
                    <a href="/html/register.html">注册</a>
                </li>
                <li class="nav-header">
                    功能列表
                </li>
                <li>
                    <a href="/html/newdata.html">测试数据上传通道</a>
                </li>
                <li>
                    <a href="#">设置</a>
                </li>
                <li class="divider">
                </li>
                <li>
                    <a href="#">帮助</a>
                </li>
            </ul>
        </div>
        <div class="span10">
            <div class="alert">
                <button type="button" class="close" data-dismiss="alert">×</button>
                <h4>
                    提示!
                </h4> <strong>警告!</strong> 请务必保留注册信息中的Mnemonics！丢失后地址将会无法找回！
            </div>
            <form>
                <fieldset>
                    <legend>生成区块链地址</legend>
                    <label>地址标记用户名（6-12位）</label><input type="text" v-model="username"/>
                    <p>
                        <span class="help-block">这里填写的内容位地址标记注册用户名:{{username}}</span>
                    </p>
                    <label>CosMos前置系统密码（一般用于登录）</label><input type="text" v-model="password"/>
                    <p>
                        <span class="help-block">这里填写密码：{{password}}（填错可找回）</span>
                    </p>
                    <label>地址支付密码（一般用于上传数据）</label><input type="text" v-model="paypass"/>
                    <p>
                        <span class="help-block">支付密码：{{paypass}}（填错不可找回，但可以使用Mnemonic或私钥恢复）</span>
                    </p>
                    <button type="button" class="btn" @click="send()">确认并生成</button>
                </fieldset>
            </form>
        </div>
    </div>
    <div class="row-fluid">
        <div class="span12">
            <dl>
                <dt>
                    Cosmos用户名称：
                </dt>
                <dd>
                    {{name}}
                </dd>
                <dt>
                    Cosmos地址（请牢记）
                </dt>
                <dd>
                    {{address}}
                </dd>
                <dt>
                    公钥（可记录）
                </dt>
                <dd>
                    {{pubkey}}
                </dd>
                <dt>
                    CosMos助记词
                </dt>
                <dd>
                    {{mnemonic}}
                </dd>
            </dl>
        </div>
    </div>
</div>
</body>
</html>
<script src="//cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
    var vm = new Vue({
        el: '.container-fluid',
        data: {
            seen: true,
            username: "",
            password: "",
            paypass: "",
            //blk
            name: "等待生成",
            address: "等待生成",
            mnemonic: "等待生成",
            pubkey: "等待生成",
        },
        created: function () {
        },
        methods: {
            send() {
                if (this.username.length < 6 || this.username.length > 12) {
                    alert("用户名应该大于6或者小于12");
                    return
                }
                if (this.password.length < 6) {
                    alert("密码应该大于6位");
                    return
                }
                if (this.paypass.length < 8) {
                    alert("Cosmos的地址密码应该大于12位");
                    return
                }

                $.ajax({
                    //请求方式
                    type: "post",
                    //请求地址
                    url: "/v1/index/index/register",
                    //数据，json字符串
                    data: {
                        "username": vm.username,
                        "password": vm.password,
                        "paypass": vm.paypass,
                    },
                    success: function (ret) {
                        if (ret) {
                            if (ret.code == 0) {
                                var data = ret.data;
                                vm.name = data.name;
                                vm.address = data.address;
                                vm.pubkey = data.pubkey;
                                vm.mnemonic = data.mnemonic;
                            } else {
                                alert(ret.data);
                            }
                        } else {
                            alert("数据没有得到正确的返回");
                        }
                    }
                });
            },
        }
    })
</script>
</body>
</html>
